<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
</head>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
        height:0;
        visibility:hidden;
    }
    a{
        color: black;
        text-decoration: none;
    }
    a:hover{
        color: #EE9572;
    }
    ul{
        position:relative;
        width:400px;
        margin:100px 50%;
    }
    ul li{
        float:left;
        width:180px;
        height:50px;
        cursor:pointer;
        text-align:center;
        line-height:40px;
        list-style:none;
    }
    ul li:nth-of-type(1){
        border-right:none;
    }
    div{
        position:absolute;
        left:0;
        top:40px;
        width:361px;
        height:330px;
        color:black;
        border-top:none;
    }
    .selected{
        color:white;
        background:#D1D1D1;
    }
    .no-selected{
        color:black;
        background:white;
    }
</style>
<body>
<p style="width:600px;height:60px;margin:0 15%">
    <img src="img/n1.png" class="clearfix" style="margin-left:20%;margin-top:20px;">
</p>
<img src="img/n2.png" class="clearfix" style="margin-left:20%;margin-top:130px;float: left">

<ul class="clearfix">
    <li onclick="showOrhide(this)" class="selected">
        <span>用户登录</span>
        <div style="display:block;box-shadow: 26px 26px 40px #D4D4D4">
            <form name="form" method="post" action="LoginServlet" style="margin-top: 60px">
                <label for="userName" style="color: #292929">用户名：
                </label><input type="text" name="username" id="username" style="width:200px;height:20px;"><br/>

                <label for="password" style="color: #292929">密&nbsp;码：
                </label><input type="password" name="password" id="password" style="width:200px;height:20px;"><br/>

                <input type="submit" value="登录" style="width:100px;height:30px;background-color:#EE9572;font-size:20px;color:white;margin-top:55px">

            </form>
            <a href="userRegister.jsp" style="margin-left: 200px;" >注册</a>
        </div>
    </li>
    <li onclick="showOrhide(this)" class="no-selected">
        <span>管理员登录</span>
        <div style="display:none;box-shadow: -26px 26px 40px #D4D4D4">
        <form name="form" method="post" action="AdminServlet" style="margin-top: 60px">
            <label for="userName">管理员账户：
            </label><input type="text" name="adminName"  style="width:200px;height:20px;"><br/>

            <label for="password">密&nbsp;&nbsp;&nbsp;码：
            </label><input type="password" name="adminPwd" style="width:200px;height:20px;"><br/>

            <input type="submit" value="登录" style="width:100px;height:30px;background-color:#EE9572;font-size:20px;color:white;margin-top:50px">
        </form>

        </div>
    </li>
</ul>

<p style="margin: 10px 43%;width:100px;height:15px;background-color:#EE9572;">
    <input type="button" onclick="jump()" name="Submit" value="返回首页" onclick="" style="width:100px;height:30px;background-color:#EE9572;font-size:15px;color:white;">
</p>
<p style="width:1000px;height:1px;border-bottom: solid 1px #CFCFCF;margin:50px 20%"></p>


<script type="text/javascript">
    var liNodes = document.getElementsByTagName("li");
    var divNodes = document.getElementsByTagName("div");
    function showOrhide(obj){
        var divNode = obj.getElementsByTagName("div")[0];
        for(var i=0;i<divNodes.length;i++){
            divNodes[i].style.display = "none";
            liNodes[i].className = "no-selected";
        }
        divNode.style.display = "block";
        obj.className = "selected";
    }
    function jump(){
        window.open("main.jsp");
    }
</script>
</body>
</html>
